import React from 'react'
import './putStore.css'
import { Button, Form, Input, Table, Space, Modal, message } from 'antd'
import notice from '../../assets/notice.png'
import PutForm from './putForm'
import { useState, useEffect } from 'react'
import moment from 'moment'
import { addMaterial, materialList, deleteMateria } from '../../api/api'

const PutStore = (props) => {
  // console.log('props---', props)
  const [dataSource, setDataSource] = useState([])

  const [forceUpdate, setfForceUpdate] = useState(true)
  const getMaterialList = () => {
    materialList().then((res) => {
      // console.log('原料列表', res)
      if (res.code == 200) {
        setDataSource(res.data.list)
        console.log('列表获取成功', dataSource)
      }
    })
  }
  // 编辑弹窗
  const [isModalOpen, setIsModalOpen] = useState(false)
  const showModal = () => {
    setIsModalOpen(true)
  }
  const handleCancel = () => {
    setIsModalOpen(false)
    getMaterialList()
  }
  useEffect(() => {
    getMaterialList()
    if (isModalOpen) {
      setfForceUpdate(false)
      setTimeout(() => {
        setfForceUpdate(true)
      }, 0)
    }
  }, [dataSource.length, isModalOpen])
  // 原料列表

  const [item, setItem] = useState({})
  // 编辑原料
  const editItem = (row, record) => {
    console.log(record)
    setItem(record)
    showModal()
  }
  // 删除原料
  const deleteItem = () => {
    console.log('删除', item)
    deleteMateria({ id: item.id }).then((res) => {
      console.log('删除原料', res)
      if (res.code == 200) {
        message.info(res.msg)
        handleDelCancel()
        getMaterialList()
      }
    })
  }

  // 删除弹窗
  const [isDelModalOpen, setIsDelModalOpen] = useState(false)
  const showDelModal = (row, record) => {
    setIsDelModalOpen(true)
    setItem(record)
  }
  const handleDelCancel = () => {
    setIsDelModalOpen(false)
  }
  // 表单
  const [form] = Form.useForm()
  // 新增原料
  const onFinish = (values) => {
    addMaterial(values).then((res) => {
      console.log('新增原料', res)
      // console.log(Form.useForm())
      if (res.code == 200) {
        // console.log(form)
        form.resetFields()
        message.info(res.msg)
        getMaterialList()
      }
    })
    console.log('Success:', values)
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
  // 表格
  // const dataSource = [
  //   {
  //     key: '1',
  //     name: '番茄',
  //     num: 32,
  //     remark: '西湖区湖底公园1号',
  //     time: '2024-02-12 12:19:30',
  //   },
  //   {
  //     key: '2',
  //     name: '鸡蛋',
  //     num: 42,
  //     remark: '西湖区湖底公园1号',
  //     time: '2024-02-12 12:19:30',
  //   },
  // ]

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
    },
    {
      title: '原料名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '数量',
      dataIndex: 'number',
      key: 'number',
      align: 'center',
    },
    {
      title: '备注',
      dataIndex: 'memo',
      key: 'memo',
      align: 'center',
      render: (text) => {
        return (
          <span style={{ color: `${text ? '#333333' : '#999999'}` }}>
            {text || '无'}
          </span>
        )
      },
    },
    {
      title: '时间',
      dataIndex: 'createtime',
      key: 'createtime',
      align: 'center',
      render: (text) => {
        return <span>{moment(text).format('YYYY-MM-DD HH:mm:ss ')}</span>
      },
    },
    {
      title: '操作',
      key: 'options',
      align: 'center',
      render: (row, record) => (
        <Space size="middle">
          <a onClick={() => editItem(row, record)}>编辑</a>
          <a
            onClick={() => showDelModal(row, record)}
            style={{ color: '#F62929' }}>
            删除
          </a>
        </Space>
      ),
    },
  ]
  return (
    <div className="putbox">
      <Modal
        title="编辑"
        footer={null}
        open={isModalOpen}
        onCancel={handleCancel}
        width={642}>
        {forceUpdate ? (
          <PutForm item={item} editFinish={handleCancel}></PutForm>
        ) : null}
      </Modal>
      <Modal
        title=" "
        footer={null}
        open={isDelModalOpen}
        onCancel={handleDelCancel}
        centered={true}
        width="25%">
        <p className="tc ft20">确认删除吗</p>
        <div className="justify-between">
          <div className="cancelBtn btmbtn" onClick={handleDelCancel}>
            取消
          </div>
          <div className="confirmBtn btmbtn" onClick={deleteItem}>
            确认
          </div>
        </div>
      </Modal>
      <div className="title ft20 bold ">原料入库登记</div>

      <Form
        name="basic"
        form={form}
        labelCol={{
          span: 3,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          marginTop: 30,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off">
        <Form.Item label="原料名称" name="name">
          <div className="iptbox2 align-center">
            <Input placeholder="请输入原料名称" />
          </div>
        </Form.Item>

        <Form.Item label="原料数量" name="number">
          <div className="iptbox2 align-center">
            <Input placeholder="请输入原料数量" />
          </div>
        </Form.Item>
        <Form.Item
          label="备注说明"
          name="memo"
          wrapperCol={{
            span: 16,
          }}>
          <div className="iptbox2 align-center">
            <Input.TextArea rows={6} placeholder="请输入备注说明" />
          </div>
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 3,
            span: 16,
          }}>
          <Button htmlType="submit" className="submitbtn">
            提交
          </Button>
        </Form.Item>
      </Form>
      <div className="noticebox align-center">
        <img src={notice} className="notice mr10" />
        已保存{dataSource.length}条记录
      </div>
      <Table
        dataSource={dataSource}
        pagination={false}
        bordered={true}
        columns={columns}
      />
    </div>
  )
}

export default PutStore
